<template>
  <div id="movie">
    <h3>电影名称：{{ movieName }}</h3>
    <h3>电影主角：{{ actor }}</h3>
    <hr />
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "Movie", //组件名
  data() {
    return {
      movieName: "龙兄虎弟",
      actor: "",
    };
  },
  mounted() {
    // 订阅消息
    this.messageId = pubsub.subscribe("transmitName", (msgName, data) => {
      console.log(
        "有人发布了 transmitName 消息，回调执行的数据为：",
        msgName,
        data
      );
      this.actor = data;
    });
  },
  //一般建议在 beforeDestroy 钩子中取消订阅
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.messageId);
    console.log("取消订阅了消息", this.messageId);
  },
};
</script>

<style>
#movie {
  color: green;
}
</style>